<template>
    <el-row>
      <el-col :span="22" :offset="1">
        <div class="panel panel-default">
          <div class="panel-heading">设置分词工具和翻译工具</div>
          <div class="panel-body">
            <el-row>
              <el-radio v-model="config.participle" label="1" >IK 分词</el-radio>
              <el-radio v-model="config.participle" label="2" disabled>jcseg</el-radio>
              <el-radio v-model="config.participle" label="3" disabled>庖丁</el-radio>
            </el-row>

            <el-row class="padding-top">
              <el-checkbox v-model="config.translate.baidu" >百度英语</el-checkbox>
              <el-checkbox v-model="config.translate.youdao" >有道</el-checkbox>
            </el-row>

            <el-row class="padding-top">
              <el-tag
                v-for="tag in tags"
                :key="tag.name"
                class="margin-right"
                :type="tag.type || 'info'"
                @click="choseTag(tag)"
              >
                <span @dblclick="editTag(tag)" class="cursor-point not-select">{{tag.name}}</span>

              </el-tag>
              <el-button class="button-new-tag" size="small"  @click="dialogBizVisible = true">+ 新业务</el-button>
            </el-row>
          </div>
        </div>

        <el-row>
          <el-col :span="6">
            <el-input v-model="input.origin" placeholder="需要翻译的业务词">
              <el-button slot="append" icon="el-icon-search" @click="translate"> 取名</el-button>
            </el-input>
            <el-input v-model="output.translate" type="textarea" autosize></el-input>
          </el-col>
        </el-row>


        <!--对话框内容 -->
        <el-dialog title="添加业务配置" :visible.sync="dialogBizVisible">
          <el-row>
            <el-input v-model="bizData.tag" placeholder="请输入内容"></el-input>
          </el-row>
          <el-row class="padding-top">
            <el-input
              type="textarea"
              :rows="20"
              autosize
              placeholder="请输入内容"
              v-model="bizData.content" >
            </el-input>
          </el-row>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogBizVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveBiz">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
</template>

<script>
    import apis from '../apis'

    // 每个页面有配置数据，用户输入数据，查询数据，编辑对话框数据
    export default {
        name: "NameTool",
        data(){
            return {
                tags: [],
                config:{
                    participle:'1',
                    translate:{
                        baidu:true,
                        youdao:false
                    }
                },
                dialogBizVisible:false,

                bizData:{
                    tag:'',
                    content:''
                },
                input:{
                    origin:''
                },
                output:{
                    translate:''
                }
            };
        },
        created(){
            //加载标签数据
            apis.nametool.tags().then(res => {
               this.tags = res.data.map(tag => {return {name:tag,type:'info'}});
               if(this.tags && this.tags.length > 0){
                   this.tags[0].type = 'warning';
               }
            });
        },
        methods:{
            editTag:function (tag) {
                this.dialogBizVisible = true;
                // 加载标签内容
                apis.nametool.tagContent(tag.name).then(res => {
                    this.bizData.tag = tag.name;
                    this.bizData.content = res.data;
                });
            },
            choseTag(tag){
                let acceptAll = JSON.parse(JSON.stringify(this.tags))
                acceptAll.forEach(curr => {
                    delete curr.type;
                    if(curr.name === tag.name){
                        curr.type = 'warning';
                    }
                });
                this.tags = acceptAll
            },
            saveBiz(){
              apis.nametool.saveTag(this.bizData).then(res => {
                  this.dialogBizVisible = false;
              });
            },
            translate(){
                //获取业务项，翻译项，原词
                let selectedTag = this.tags.filter(tag => tag.type === 'warning')[0];
                let englishs = Object.keys(this.config.translate).filter(tranlate => this.config.translate[tranlate]);
                let text = this.input.origin;
                apis.nametool.translate(text,selectedTag.name,englishs.join(',')).then(res => {
                  this.output.translate = res.data.join('\n');
                });
            }
        }
    }
</script>

<style scoped>

</style>
